<template>
  <div class="tree-menu">
    <div class="label-wrapper" @click="toggleChildren">
      <div :style="indent" :class="labelClasses">
        <i v-if="nodes" class="fa" :class="iconClasses"></i>
        {{ label }}
      </div>
    </div>
    <TreeMenu
      v-if="showChildren"
      v-for="(node,index) in nodes"
      :nodes="node.nodes"
      :label="node.label"
      :depth="depth + 1"
      :key="index"
    ></TreeMenu>
  </div>
</template>
<script>
export default {
  props: ["nodes", "label", "depth"],
  name: "treeMenu",
  data() {
    return {
      showChildren: false
    };
  },
  computed: {
    iconClasses() {
      return {
        "fa-plus-square-o": !this.showChildren,
        "fa-minus-square-o": this.showChildren
      };
    },
    labelClasses() {
      return { "has-children": this.nodes };
    },
    indent() {
      return {
        transform: `translate(${this.depth * 10}px)`
      };
    }
  },
  methods: {
    toggleChildren() {
      this.showChildren = !this.showChildren;
    }
  }
};
</script>
<style lang="less" scoped>
.tree-menu {
  width: 100px;
  background-color: red;
  .label-wrapper {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    transition: all 2s;

    .has-children {
      cursor: pointer;
    }
  }
}
</style>